<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./css/flexslider.css"/>
    <link rel="stylesheet" href="./css/base.css?20150803"/>
    <style type="text/css">
        .ms-controller, [ms-controller] {
            display: none;
        }
    </style>
</head>
<body>

<!-- header 顶部 -->
<header>
     <a href="index.html" style="padding-left:10px;"><img src="images/e-jialogo.png" alt="" style="width:500px;height:70px;" /></a>
    <span class="right">
        <input type="text" class="headInput" id="keyinput" placeholder="输入商品名称"/><input type="button" class="headBtn" id="btnsearch" value="搜索"/>
    </span>
</header>


<div class="road">
    <a href="javascript:history.back(-1)"><i class="fa fa-angle-left"></i></a>
    购物车
    <hr/>
</div>

<div class="fliterWrap" ms-controller="scartlst">
    <div class="panel">
        <div class="panel-heading">
            <div class="row">
                <div class="col-sm-6">商品</div>
                <div class="col-sm-2">数量</div>
                <div class="col-sm-2">价格</div>
                <div class="col-sm-2"></div>
            </div>
        </div>
        <div class="panel-body">
            <article class="shopItem row" ms-repeat-el="ctData">
                <div class="col-sm-6">
                    <a href="#">
                        <div class="pull-left">
                            <img ms-src="{{el.imgurl}}" class="shopItemImg"/>
                        </div>
                        <div class="shopAttr">
                            <h3>{{el.name}}</h3>
                          <!--  <span>颜色分类：绿色</span>
                            <span>尺寸大小：s码</span>-->
                        </div>
                    </a>
                </div>
                <div class="col-sm-2">
                    <div class="shopNumber">
                        <a href="javascript:;" class="btn-minus" ms-click="minusnum(el)">-</a>
                        <span class="number">{{el.num}}</span>
                        <a href="javascript:;" class="btn-add" ms-click="addnum(el)">+</a>
                    </div>
                </div>

                <div class="col-sm-2">
                    <p class="price">￥<b>{{el.price}}</b></p>
                </div>

                <div class="col-sm-2">
                    <a href="javascript:;" class="deleteShop" ms-click="deleteShop(el)"><i class="fa fa-trash-o"></i></a>
                </div>
            </article>

        </div>

        <div class="panel-footer">
            <p class="shopCount"><span><i class="fa fa-shopping-cart"></i>商品总数：<b>{{totalnumber}}</b>件</span>
                <span>商品总价：<em>￥{{totalprice}}</em>元</span></p>
            <a href="index.html" class="btnOrder">继续购物</a>&nbsp;
            <a href="javascript:showModal();" class="btnOrder">去结算</a>
             
        </div>

    </div>

</div>

<div class="modal animated bounceIn">
    <div class="modal_header">订单结算<a href="javascript:void(0);" class="closeModal"><i class="fa fa-times-circle"></i></a> </div>
    <div class="modal_body">
        <p class="textColor textLg">恭喜您，订单已生成！</p>
        <p class="w300"><i class="fa fa-tag textColor"></i> <span class="orderno">订单号：</span></p>
        <p class="w300"><i class="fa fa-money textColor"></i> <span>金额：</span><b class="textColor fontThin textLg sumprice">￥0</b></p>
    </div>
    <div class="modal_footer">
        <a href="javascript:gopay();" class="btnPay">好的，我现在去收银台</a>
    </div>

</div>
<div class="backMasker"></div>

<style>
    body {
        background: #f3f1f4;
    }
</style>
<script src="js/jquery.min.js"></script>
<script src="js/avalon.mobile.min.js"></script>
<script src="js/MobileCom.js"></script>
<script src="js/cartjs.js?v=6"></script>
<script>
    //商品数量
    function changeCount() {
        var c = 0;
        $.each($(".shopItem"), function () {
            c += parseInt($(this).find(".number").text());
        })
        $(".shopCount span b").text(c);
    }

    //商品总价格
    function changePrices() {
        var p = 0;
        $.each($(".shopItem"), function () {
            p += parseInt($(this).find(".number").text()) * parseInt($(this).find(".price b").text());
        })
        $(".shopCount span em").text("￥" + p);
    }

    //弹出确认
    function showModal() {

        //生成订单
        var prdlist = cart.getproductlist();

        if (prdlist != null) {
            var d = "";
            $(prdlist).each(function (index, item) {
                if (index != 0) {
                    d += ',';
                }
                d += '{"id":"' + item.id + '","num":"' + item.num + '"}';
            })

            d = "[" + d + "]";

            $.post("/View/SpeList/DLLAjaxHandler.ashx?action=AddNewOrder&proDetail=" + d + "&euser=" + window.localStorage.getItem("EUser"), function (data) {
                if (data != "error") {
                    var r = $.parseJSON(data);

                    $(".modal_body .orderno").text(r.orderNo);
                    $(".modal_body .sumprice").text("￥" + r.sumPrice);


                    $(".modal").addClass("bounceIn").show();
                    $(".backMasker").show();
                }
                else {


                }

            })


        } else {

        }
    }


    function gopay() {
        cart.deleteall();
        window.location = "index.html";
    }

    var model = avalon.define({
        $id: "scartlst",
        ctData: [],
        deleteShop: function (el) {
            cart.deleteproduct(el.id);
            $(this).parents(".shopItem").remove();
            changeCount();
            changePrices();
        },
        addnum: function (el) {
            var n = parseInt($(this).parent().find(".number").text());
            $(this).parent().find(".number").text(n + 1);
            changeCount();
            changePrices();

            cart.updateproductnum(el.id, $(this).parent().find(".number").text());
        },
        minusnum: function (el) {
            var n = parseInt($(this).parent().find(".number").text());
            if (n > 1) {
                $(this).parent().find(".number").text(n - 1);
                changeCount();
                changePrices();
                cart.updateproductnum(el.ID, $(this).parent().find(".number").text());
            }
        },
        totalnumber: 0,
        totalprice: 0

    });

    $(function () {
        if (window.localStorage.getItem("EUser") == null) {
            window.location = "login.html";
        }
        $("#btnsearch").click(function () {
            window.location = "search.html?key=" + $("#keyinput").val();
        })
        $("#keyinput").keydown(function (e) {

            if (e.keyCode == 13) {
                window.location = "search.html?key=" + $("#keyinput").val();
            }
        })

        //获取购物车商品

        //cart.deleteall();
        //alert(JSON.stringify(cart.getproductlist()));

        
        var prdlist = cart.getproductlist();
        model.ctData = prdlist;
        model.totalnumber = orderdetail.totalNumber;
        model.totalprice = orderdetail.totalAmount


        ////点加号
        //$(".btn-add").click(function () {
        //    //var n = parseInt($(this).parent().find(".number").text());
        //    //$(this).parent().find(".number").text(n + 1);
        //    //changeCount();
        //    //changePrices();
        //});

        //点减号
        //$(".btn-minus").click(function () {
        //    var n = parseInt($(this).parent().find(".number").text());
        //    if (n > 1) {
        //        $(this).parent().find(".number").text(n - 1);
        //        changeCount();
        //        changePrices();
        //    }
        //})


        //删除
        //$(".deleteShop").click(function(){
        //    $(this).parents(".shopItem").remove();
        //    changeCount();
        //    changePrices();
        //})

        //关闭窗口
        $(".closeModal").click(function(){
            $(this).parents(".modal").removeClass("bounceIn").addClass("bounceOut");
            setTimeout(function(){
                $(".backMasker").hide();
                $(".modal").hide().removeClass("bounceOut");
            },500)
        })


    });
</script>
</body>
</html>